<template>
  <Modal
    v-model="modalShow"
    :title="$t('添加收货地址')"
    footer-hide
    width="800"
  >
      <div class="name-wrap">
        <Input class="address-input" v-model="name" :placeholder="$t('收货人')" />
        <Input class="address-input" v-model="phone" :placeholder="$t('请输入您的手机号')" />
      </div>
      <div class="nameline">
        <Select class="nameline_sele" v-model="addressJson.pro" :placeholder="$t('请选择')" @on-change="getCityList">
            <Option
              v-for="(item, index) in proviArrs"
              :key="index"
              :value="index">
              {{ item.pro_name }}
            </Option>
        </Select>
        <Select class="nameline_sele" v-model="addressJson.city" :placeholder="$t('请选择')" @on-change="getAreaList">
            <Option
              v-for="(item, index) in cityArrs"
              :key="index"
              :value="index">
              {{ item.city_name }}
            </Option>
        </Select>
        <Select class="nameline_sele" v-model="addressJson.area" :placeholder="$t('请选择')" >
            <Option
              v-for="(item, index) in areaArrs"
              :key="index"
              :value="index">
              {{ item.area_name }}
            </Option>
        </Select>
      </div>
      <!-- <Input
        class="address-input"
        v-model="address"
        :placeholder="$t('请输入省/市/区')"
      /> -->
      <Input
        class="address-input address-input-detail"
        v-model="detailAddress"
        :placeholder="$t('详细地址')"
        type="textarea"
      />
      <div @click="setDefault">
      <Radio v-model="isDefault" >{{$t('设为默认')}}</Radio>

      </div>

    <div class="modal-bottom">
      <Button @click="onCancel">{{$t('取消')}}</Button>
      <Button style="background: #e2231a;color: #fff;" @click="onConfirm">{{$t('提交')}}</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  name: "AddAddress",
  data() {
    return {
      modalShow: false,
      name: "",
      phone: "",
      address: "",
      addressJson:{
        pro:"",
        city:"",
        area:"",
      },
      detailAddress: "",
      isDefault: false,
      proviArrs:[],
      cityArrs:[],
      areaArrs:[],
    };
  },
  created(){
    this.getProvince()
  },
  methods: {
    getProvince () {
				this.$http.getpro().then(res => {
					if (res.status == 200) {
            this.proviArrs = res.data
					}
				})
      },

      getAreaList (ins) {
        if(ins!=undefined){
          this.$http.getarea({
            city_id:this.cityArrs[ins].id
          }).then(res => {
            if (res.status == 200) {
              this.areaArrs = res.data
              this.addressJson.area=''
            }
          })
        }
      },

      getCityList (ins) {
        if(ins!=undefined){
          this.$http.getcity({
            pro_id:this.proviArrs[ins].id
          }).then(res => {
            if (res.status == 200) {
              this.cityArrs = res.data
              this.addressJson.city=''
              this.addressJson.area=''
            }
          })
        }
      },
    handleRender() {
      this.modalShow = true;
    },
    setDefault(){
      this.isDefault = !this.isDefault
    },
    onConfirm(){
      const {  name,
        phone,
        detailAddress,isDefault} = this
      if(!name){
         return  this.$Message.error(this.$t('请填写收货人姓名'))
      }
      if(!phone){
        return  this.$Message.error(this.$t('请输入手机号'))
      }
      if(!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(phone)){
        return  this.$Message.error(this.$t('请输入正确的手机号'))
      }
      if(!this.addressJson.pro===''){
        return  this.$Message.error(this.$t('请先选择收货地址-省份'))
      }
      if(this.addressJson.city===''){
        return  this.$Message.error(this.$t('请先选择收货地址-城市'))
      }
      if(!this.addressJson.area===''){
        return  this.$Message.error(this.$t('请先选择收货地址-地区'))
      }
      if(!detailAddress){
        return  this.$Message.error(this.$t('请填写详细地址'))
      }
      console.log(this.addressJson)
      this.$emit('onConfirm',{
        name,
        phone,
        // address,
        province:this.proviArrs[this.addressJson.pro].pro_name,
        pro_id:this.proviArrs[this.addressJson.pro].code,
        city:this.cityArrs[this.addressJson.city].city_name,
        city_id:this.cityArrs[this.addressJson.city].code,
        area:this.areaArrs[this.addressJson.area].area_name,
        area_id:this.areaArrs[this.addressJson.area].code,
        // ...this.addressJson,
        detailAddress,isDefault})
    },

    onCancel(){
      this.reset()
      this.modalShow = false;
    },
    reset(){
      this.name = '',
        this.phone=''
      this.address=''
      this.detailAddress=''
      this.addressJson={
        pro_id:[],
        city_id:[],
        area_id:[],
      }
      this.isDefault= false

    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/common.scss";
.name-wrap {
  @include flex($jc: space-between);
  .address-input {
    width: 48%;
  }
}
.address-input {
  margin: 10px 0;
  /deep/ .ivu-input {
    height: 40px;
  }
  &-detail{
    /deep/ .ivu-input {
      height: 110px;
    }
  }
}
.nameline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .nameline_sele{
    width: 30%;
  }
}
/deep/ .ivu-modal-header-inner{
  border:none;
  margin-top: 10px;
}
/deep/ .ivu-modal-footer {
  .ivu-btn-primary {
    background-color: #e2231a;
    border: none;
    border-radius: 0;
  }
}
.modal-bottom{
    text-align:right;
  margin-top: 20px;
}
</style>
